<template>
  <div class="AddMeeting">
    <el-form ref="form" :model="form" label-width="80px" style="width: 60%;" :rules="rules">
      <el-form-item label="会议类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="本校会议"></el-radio>
          <el-radio label="校外会议"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="会议名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="会议概要">
        <el-input v-model="form.outline"></el-input>
      </el-form-item>
      <el-form-item label="会议时间" prop="meetingTime">
        <el-date-picker
          v-model="form.meetingTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="currentTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="会议地点" prop="place">
        <el-checkbox-group v-model="form.place">
          <el-checkbox v-for="(item,index) in place" :key="index" :label="item" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="参会人员" v-if="form.type === '本校会议'" prop="personnel">
        <el-link style="position: relative; top: -1px;" :underline="false" type="primary" @click="dialogPersonnel = true">添加</el-link>
        <el-tag
          class="ml-10"
          v-for="tag in form.personnel"
          :key="tag.id">
          {{tag.label}}
        </el-tag>
      </el-form-item>
      <el-form-item label="签到时间">
        <el-select v-model="form.signInTime" placeholder="请选择提前签到时间">
          <el-option label="准时签到" value="0"></el-option>
          <el-option label="提前10分钟" value="10"></el-option>
          <el-option label="提前30分钟" value="30"></el-option>
        </el-select>
      </el-form-item>
      <template v-if="form.type === '校外会议'">
        <el-form-item label-width="10px">
          <h3>参会人信息收集</h3>
          <el-button type="primary" @click="add" size="small">添加文本控件</el-button>
        </el-form-item>
        <el-form-item label-width="10px" v-for="(item,index) in form.addForm" :key="index">
          <el-input style="width: 130px;" minlength="2" maxlength="5" show-word-limit v-model="item.label"></el-input>
          :
          <el-input style="width: 300px;" v-model="item.text" :placeholder="item.placeholder"></el-input>
          <i class="el-icon-delete fs-18 ml-10 pointer" @click="form.addForm.splice(index, 1)" v-if="index !== 0"></i>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
    <PersonnelTree :dialog-personnel="dialogPersonnel" @close="dialogPersonnel = false" @enter="dialogPersonnelEnter"></PersonnelTree>
  </div>
</template>

<script>
import PersonnelTree from '@/components/PersonnelTree';
export default {
  name: 'AddMeeting',
  components: { PersonnelTree },
  data () {
    return {
      place: [], // 接口获取的地点
      currentTime: [], // 当前时间
      dialogPersonnel: false,
      form: { // 创建会议表单
        type: '本校会议', // 会议类型
        name: '', // 会议名
        outline: '', // 会议概要
        meetingTime: [], // 会议时间
        place: [], // 选择的会议地点
        personnel: [], // 参会人员
        signInTime: '0', // 签到时间
        addForm: [ // 参会人信息收集
          {
            label: '姓名',
            placeholder: '请输入姓名',
            text: ''
          },
          {
            label: '手机号',
            placeholder: '请输入手机号',
            text: ''
          }
        ]
      },
      rules: {
        type: [
          { required: true, message: '请选择会议类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        meetingTime: [
          { type: 'array', required: true, message: '请选择会议时间', trigger: 'change' }
        ],
        place: [
          { type: 'array', required: true, message: '请选择会议地点', trigger: 'change' }
        ],
        personnel: [
          { type: 'array', required: true, message: '请选择参会人员', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    /**
     * 确认选择的方法
     * @param {Array}data 选择的人员
     */
    dialogPersonnelEnter (data) {
      this.dialogPersonnel = false;
      this.form.personnel = data
    },
    /**
     * 提交表单
     * @param {String}formName 表单的ref
     */
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$moment(this.form.meetingTime[0]).format('YYYY-MM-DD') !== this.$moment(this.form.meetingTime[1]).format('YYYY-MM-DD')) {
            this.$message({
              message: '请选择同一天',
              type: 'warning'
            });
          }
          if (this.form.meetingTime[1] - this.form.meetingTime[0] > 86400000) {
            this.$message({
              message: '会议时间不得超过一天',
              type: 'warning'
            });
            this.form.meetingTime = []
          } else {
            const meetingTimeSlot = `${this.$moment(this.form.meetingTime[0]).format('YYYY-MM-DD')} ${this.$moment(this.form.meetingTime[0]).format('HH:mm')}-${this.$moment(this.form.meetingTime[1]).format('HH:mm')}`;
            const data = {
              userId: this.$storage.get('userId'),
              type: this.form.type,
              name: this.form.name,
              outline: this.form.outline,
              meetingTime: meetingTimeSlot,
              place: this.form.place,
              personnel: this.form.personnel,
              signInTime: this.form.signInTime,
              addForm: this.form.addForm
            };
            this.$api.partakeMeeting(data).then(res => {
              this.$message({
                message: '发起会议成功',
                type: 'success'
              });
              this.$store.commit('setActiveName', 'initiate');
              this.$router.push('initiate');
            })
          }
        }
      });
    },
    /**
     * 添加文本控件
     */
    add () {
      if (this.form.addForm.length <= 10) {
        this.form.addForm.push(
          {
            label: '',
            placeholder: '',
            text: ''
          }
        )
      } else {
        this.$message({
          message: '最多只能添加 10 项',
          type: 'warning'
        });
      }
    },
    getPlace () {
      const data = {
        orgId: this.$storage.get('orgId')
      };
      this.$api.getPlace(data).then(res => {
        this.place = res
      })
    }
  },
  created () {
    this.currentTime.push(this.$moment().format('HH:mm:ss'));
    this.getPlace();
    if (this.$route.params.id !== '0') {
      const data = {
        meetingId: this.$route.params.id
      };
      this.$api.getMeetingDetail(data).then(res => {
        this.form.type = res.type;
        this.form.name = res.name;
        this.form.outline = res.outline;
        this.form.meetingTime = res.meetingTime;
        this.form.place = res.place;
        this.form.signInTime = res.signInTime;
        this.form.addForm = res.addForm;
        console.log(this.form);
      })
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">

</style>
